<template>
    <div class="top-menu flex align-center justify-between text-14 padding-lr-sm">
        <div style="cursor: pointer" @click="toHome">意图LOGO</div>
        <el-dropdown @command="handleCommand">
            <div class="el-dropdown-link">
                {{ user_info.nickname }}
                <el-icon class="el-icon--right">
                    <arrow-down/>
                </el-icon>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="userCenter">个人资料</el-dropdown-item>
                    <el-dropdown-item command="record">绘画记录</el-dropdown-item>
                    <el-dropdown-item command="editPassWord">修改密码</el-dropdown-item>
                    <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script lang="ts" setup>
    import {ref} from "vue";
    import {ArrowDown} from '@element-plus/icons-vue'
    import {useRouter} from "vue-router";
    import {logout} from "../http/common";
    import {setToken} from "../plugins/cookie";
    import socket from "../http/websocket";

    import useUserStore from '../store/user'

    const store: any = useUserStore()
    console.log("store",store);
    const user_info = store.userMsg
    console.log("user_info", user_info)
    const router = useRouter()


    const toHome = () => {
        router.push({
            path: '/home'
        })
    }

    const handleCommand = (command: string | number | object) => {
        console.log(`click on item ${command}`)

        //个人资料
        if (command == 'userCenter') {
            router.push({
                path: '/user'
            })
        }

        //创作记录
        if (command == 'record') {
            router.push({
                path: '/recordView'
            })
        }

        //修改密码
        if (command == 'editPassWord') {
            router.push({
                path: '/setPassWord',
                query: {
                    type: "edit"
                }
            })
        }

        //退出登录
        if (command == 'loginOut') {
            logout().then(res => {
                setToken('')
                socket.close()
            })
            router.push({
                path: '/'
            })
        }

    }

</script>

<style lang="scss" scoped>
  @import "@/assets/css/variables.scss";

  .top-menu {
    height: 0.667rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: $Secondary1;
    color: $Secondary4;

  }

</style>

<style scoped>
    .top-menu .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
    }
</style>
